/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Row, Col, Card, Table } from "antd";
import * as Icons from "@ant-design/icons";
import Charts from "../../components/charts/index";
import { IconElement } from "../../components/IconElement/index";
import { getHomeData } from "../../api/index";
import "./home.css";
import { Data } from "../../types/home";
import imageUrl from "../../assets/images/user.jpg";
// 定义表格列的类型
const columns = [
  {
    title: "课程",
    dataIndex: "name",
    key: "name", // 添加 key 属性以确保唯一性
  },
  {
    title: "今日购买",
    dataIndex: "todayBuy",
    key: "todayBuy",
  },
  {
    title: "本月购买",
    dataIndex: "monthBuy",
    key: "monthBuy",
  },
  {
    title: "总购买",
    dataIndex: "totalBuy",
    key: "totalBuy",
  },
];

// 定义统计数据的类型
interface CountDataItem {
  name: string;
  value: number;
  icon: keyof typeof Icons; // 使用 keyof 提取所有图标组件的键
  color: string;
}

// 定义图表数据的类型
// 修改 ChartData 的类型定义
interface ChartData {
  order?: {
    xData: string[];
    series: Array<{
      name: string;
      type: "line" | "bar"; // 明确指定为字面量联合类型
      data: number[];
    }>;
  };
  user?: {
    xData: string[];
    series: Array<{
      name: string;
      type: "bar"; // 明确指定为字面量类型
      data: number[];
    }>;
  };
  pie?: {
    series: Array<{
      type: "pie"; // 明确指定为字面量类型
      data: any[];
    }>;
  };
}

const countData: CountDataItem[] = [
  {
    name: "今日支付订单",
    value: 1234,
    icon: "CheckCircleOutlined",
    color: "#2ec7c9",
  },
  {
    name: "今日收藏订单",
    value: 3421,
    icon: "ClockCircleOutlined",
    color: "#ffb980",
  },
  {
    name: "今日未支付订单",
    value: 1234,
    icon: "CloseCircleOutlined",
    color: "#5ab1ef",
  },
  {
    name: "本月支付订单",
    value: 1234,
    icon: "CheckCircleOutlined",
    color: "#2ec7c9",
  },
  {
    name: "本月收藏订单",
    value: 3421,
    icon: "ClockCircleOutlined",
    color: "#ffb980",
  },
  {
    name: "本月未支付订单",
    value: 1234,
    icon: "CloseCircleOutlined",
    color: "#5ab1ef",
  },
];
// 定义 API 返回数据的类型

const Home: React.FC = () => {
  const [tableData, setTableData] = useState<any[]>([]);
  const [chartData, setChartData] = useState<ChartData>({});
  const navigate = useNavigate();
  useEffect(() => {
    getHomeData().then((res) => {
      const { orderData, tableData, videoData, userData } =
        res.data as unknown as Data;

      setTableData(tableData);

      // 对于折线图图表数据整理
      const order = orderData;
      const xData = order.date;
      const keyArray = Object.keys(order.data[0]);
      const series: { name: string; type: "line" | "bar"; data: number[] }[] =
        [];
      keyArray.forEach((item) => {
        series.push({
          name: item,
          type: "line",
          data: order.data.map((v: any) => v[item]),
        });
      });

      setChartData({
        order: {
          xData,
          series,
        },
        user: {
          xData: userData.map((v: { date: string }) => v.date),
          series: [
            {
              name: "新增用户",
              data: userData.map((v: { new: number }) => v.new),
              type: "bar",
            },
            {
              name: "活跃用户",
              data: userData.map((v: { active: number }) => v.active),
              type: "bar",
            },
          ],
        },
        pie: {
          series: [
            {
              data: videoData as Array<{ value: number; name: string }>,
              type: "pie",
            },
          ],
        },
      });
    });
  }, []);

  const handleClick = () => {
    console.log("点击了");
    navigate("/list/paylist");
  };
  // 动态创建图标组件
  // ... 其他代码保持不变 ...

  // 动态创建图标组件

  // ... 后续代码保持不变 ...
  return (
    <Row className="home">
      <Col span={8}>
        <Card hoverable>
          <div className="user">
            <img className="user-avatar" src={imageUrl} alt="" />
            <div className="user-info">
              <span className="user-name"> 温妤琪 </span>
              <span className="user-role">超级管理员</span>
            </div>
          </div>
          <div className="login-info">
            <div className="login-info-item">
              上次登录时间：<span>2020-01-01 12:00:00</span>
            </div>
            <div className="login-info-item">
              上次登录地点：<span>河南省漯河市</span>
            </div>
          </div>
        </Card>
        <Card className="table" hoverable>
          <Table
            pagination={false}
            rowKey={(item) => item.id}
            columns={columns}
            dataSource={tableData}
          />
        </Card>
      </Col>
      <Col span={16}>
        <div className="num">
          {countData.map((item) => {
            return (
              <Card key={item.name} hoverable onClick={handleClick}>
                <div
                  className="icon"
                  style={{
                    backgroundColor: item.color,
                  }}
                >
                  <IconElement iconName={item.icon} />
                </div>
                <div className="detail">
                  <span className="value">￥{item.value}</span>
                  <span className="name">{item.name}</span>
                </div>
              </Card>
            );
          })}
        </div>
        <Card hoverable style={{ marginTop: "20px", marginLeft: "5px" }}>
          {chartData.order && (
            <Charts chartData={chartData.order} style={{ height: 280 }} />
          )}
          <div
            style={{ display: "flex", marginTop: "20px", marginLeft: "40px" }}
          >
            {chartData.user && (
              <Charts
                chartData={chartData.user}
                style={{ height: "240px", width: "50%" }}
              />
            )}
            {chartData.pie && (
              <Charts
                chartData={chartData.pie}
                isAxisChart={false}
                style={{ height: "260px", width: "50%" }}
              />
            )}
          </div>
        </Card>
      </Col>
    </Row>
  );
};

export default Home;
